<template>
	<div class="map">
		<div id="container"></div>
		<div id="myPageTop">
			<table>
				<tr>
					<td>
						<label>请输入关键字：</label>
					</td>
					<td class="column2">
					    <label>经纬度：</label>
					</td>
				</tr>
				<tr>
					<td>
						<input id="tipinput" />
					</td>
					<td>
						<input type="text" id="lnglat" v-model="val">
					</td>
				</tr>
			</table>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				map: null,
				auto: null,
				placeSearch: null,
				val:''
			}
		},
		mounted() {
			this.init();
		},
		methods: {
			init() {
				this.map = new AMap.Map("container", {
					resizeEnable: true
				});
				this.map.on('click', function(e) {
					alert(e.lnglat.getLng() + ',' + e.lnglat.getLat())
				});
				this.auto = new AMap.Autocomplete({
					input: "tipinput"
				});
				this.placeSearch = new AMap.PlaceSearch({
					map: this.map
				}); 
				
				AMap.event.addListener(this.auto, "select", this.select); 
				
			},
			select(e) {
				this.placeSearch.setCity(e.poi.adcode);
				this.placeSearch.search(e.poi.name);
			}
		}
	}
</script>

<style scoped>
	#container {
		width: 100%;
		height: 100vh;
	}
</style>
